<template>
  <div id="details">
    <header></header>
    <div class="details-wrapper">
      <div
        class="closeFrame"
        @click="closeframe"
      >
        <div>关闭</div>
      </div>
      <div class="article-title">{{ content.title }}</div>
      <div class="article-time">{{ content.time }}</div>
      <mavon-editor
        class="md"
        :value="content.content"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      ></mavon-editor>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Details',
  data() {
    return {
      id: '',
      content: {},
      codeStyle: 'monokai-sublime', //设置主题 ，
    }
  },
  created() {
    this.id = this.$route.query.id
    //页面返回顶部
    window.scrollTo(0, 0)
    this.getDetail()
  },
  mounted() {},
  methods: {
    getDetail() {
      let _this = this
      let data = { id: this.id }
      this.$axios.post(this.$api.detail, data).then(function (res) {
        _this.content = res.data.data[0] || []
      })
    },
    // 关闭详情框，返回上级
    closeframe() {
      window.console.log('1')
      window.history.back(-1)
    },
  },
}
</script>

<style scoped>
header {
  height: 210px;
}

.closeFrame {
  display: flex;
  justify-content: flex-end;
}
.closeFrame div {
  padding: 0 10px 10px;
  color: #0084ff;
}
.closeFrame div:hover {
  cursor: pointer;
}

.md {
  box-shadow: none;
}

.v-note-wrapper.shadow {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}

#editor {
  margin: auto;
  width: 100%;
  height: 580px;
  margin: 15px 0;
}

.details-wrapper {
  max-width: 960px;
  margin: -110px auto 50px;
  min-height: 100px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px;
  padding: 35px;
  background: rgb(255, 255, 255);
  border-radius: 4px;
  box-sizing: border-box;
  min-height: calc(100vh - 120px);
}

.article-title {
  font-size: 36px;
  line-height: 48px;
  font-weight: 400;
  color: rgb(33, 33, 33);
}

.article-time {
  line-height: 14px;
  font-size: 13px;
  font-weight: bold;
  color: rgb(114, 114, 114);
  margin: 8px 0px 10px;
  overflow: hidden;
}

.v-note-wrapper {
  z-index: 0 !important;
}
</style>
